<script setup lang="ts">
import {NOTICE_TYPE} from "../const/Maps";

definePageMeta({
  layout:'w1200',
  title:'公告列表',
});
const router=useRoute();
const form=reactive({
  limit:20,
  page:1,
  type:router.query.type??10,
  is_up:1,
});
let {apiBase,imgBase}=useRuntimeConfig().public
const {data:list,refresh}=await useServerGet('/notice/getList',form)
</script>
<template>
<div>
  <div class="my-4 text-base">{{NOTICE_TYPE[form.type]}}列表</div>
  <el-card class="mt-4">
    <div v-for="item in list.data.list">
    <NuxtLink :to="`/noticeDetail/${item.id}.html`" class="w-full" >
      <div class="flex m-10" >
        <div class="w-24 h-24 bg-[--el-color-primary] text-white text-center leading-[96px]" :style="{backgroundImage:`url(${imgBase}/${item.img})`,backgroundSize:'100% 100%'}">
        </div>
        <div class="ml-2 flex-1">
            <div class="text-lg">{{item.title}}</div>
            <div class="text-xs text-gray-400 my-1">更新时间：{{item.updated_at}}</div>
            <div class="text-sm line-clamp-2 break-all">{{item.synopsis.repeat(100)}}</div>
        </div>
      </div>
    </NuxtLink>
    <el-divider direction="horizontal"></el-divider>
    </div>
    <MyPage v-model:page="form.page" v-model:perpage="form.limit" v-model:total="list.data.total" @change="refresh"></MyPage>
  </el-card>
</div>
</template>

<style scoped lang="scss">

</style>